<template>
    <Transition name="fade">
        <slot></slot>
    </Transition>
</template>

<script setup lang="ts">
const props = defineProps({
    animationTime:{
        type:[String,Number],
        default:0.2
    },
    visible:{
        type:Boolean,
        default:false
    },
    unMount:{
        type:Function,
        required:true
    }
})
watch(()=> props.visible,(val)=>{
    if(!val) props.unMount()
})
</script>


<style lang="scss" scoped>
/* 进入动画 */
.fade-enter-active {
    animation: move v-bind("props.animationTime + 's'");
}

/* 离开动画 */
.fade-leave-active {
    animation: move v-bind("props.animationTime + 's'") reverse;
}

@keyframes move {
    0%{
        opacity: 0;
        transform: translateX(-50%) translateY(-50%) scale(0.9) rotate(90deg);
    }
    80%{
        transform: translateX(-50%) translateY(-50%) scale(1.05) rotate(90deg);
    }
    100%{
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1) rotate(90deg);
    }
}
</style>